<template>
	<view class="index">
		<preview-image ref="popupComponent" :imagePreviewExample="imagePreviewExample" />
		<scroll-view :scroll-y="true" class="scroll-Y" style="flex: 1">
			<canvas-control noDetail id="canvasControl" :selectData="getInfoData" @changeSwitch="onChangeSwitch" @fullScreen="OnFullScreen" />
			<swiper-image
				ref="canvasFrame"
				:swiperData="swiperData"
				:boxSwitch="boxSwitch"
				:postUrl="postUrl"
				:threshold="0.2"
				@swiperData="onSwiperData"
				@swiperDataIndex="onSwiperDataIndex"
				@selectIndex="onSelectIndex"
				@collectData="onCollectData"
			/>
			<!-- <pack-info v-if="getCollData" :collData="getCollData" /> -->
			<view class="table-box">
				<ua-table :columns="columns" :data="swiperData[swiperDataIndex].data" />
			</view>
		</scroll-view>

		<custom-bottom @images="uploadImage"></custom-bottom>
	</view>
</template>

<script>
import Vue from 'vue';
// import CustomHeader from "@/components/header/header.vue";
import CanvasControl from '@/components/canvasControl/index.vue';
import SwiperImage from '@/components/swiperImage/index.vue';
import PackInfo from '@/components/packInfo/index.vue';
import RateInfo from '@/components/rateInfo/index.vue';
import CustomBottom from '@/components/bottom/index.vue';
import PreviewImage from '@/components/previewImage/index.vue';
// #ifdef H5
import example1 from './example1';
import example2 from './example2';
// #endif

export default Vue.extend({
	components: {
		// CustomHeader,
		CustomBottom,
		CanvasControl,
		SwiperImage,
		PackInfo,
		RateInfo,
		PreviewImage
	},
	data() {
		return {
			title: 'Hello',
			rateData: [],
			collData: [
				{
					name: '四川中烟',
					count: '16',
					rateCount: '10'
				}
			],
			columns: [
				{ type: 'index', align: 'center', width: 80, fixed: true }, // 索引序号
				{ prop: 'name', label: '名称', align: 'center', width: 320 },
				{ prop: 'position', label: '位置', align: 'center', width: 320 },
				{ prop: 'score', label: '得分', align: 'center', width: 320 },
			],
			list: [
				{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				},{
					id: '1',
					author: 'zz',
					title: '12333',
					image: 'https://picsum.photos/400/400?random=' + '@guid()',
					switch: 'true',
					tags: ['admin', 'test', 'dev'],
					progress: '40',
				}
			],
			swiperData: [],
			swiperDataIndex: 0,
			selectDataIndex: 0,
			boxSwitch: true,
			imagePreviewExample: '',
			postUrl: ''
		};
	},
	mounted() {
		// #ifdef H5
		this.postUrl = '/api/cv/image/lw/kc/predict';
		this.swiperData = [example1, example2];
		
		console.log(this.swiperData);
		// #endif
		// #ifdef MP-WEIXIN
		this.postUrl = 'https://containeriden.ai-paas.com/cv/image/lw/kc/predict';
		// #endif
	},
	computed: {
		getInfoData() {
			if (this.swiperData.length > 0) return this.swiperData[this.swiperDataIndex].data[this.selectDataIndex];
			else return [];
		},
		getCollData() {
			if (this.swiperData.length > 0)
				if ('collectData' in this.swiperData[this.swiperDataIndex]) {
					return this.swiperData[this.swiperDataIndex].collectData;
				} else {
					return [];
				}
			else return [];
		}
	},
	methods: {
		uploadImage(swiperDatas) {
			this.swiperData.push(swiperDatas);
		},
		onSwiperData(swiperData) {
			console.log(swiperData);
			this.swiperDataIndex = swiperData.index;
			this.$set(this.swiperData[swiperData.index], 'data', swiperData.dataList);
		},
		// 选中数据
		onSelectIndex(index) {
			console.log(index);
			this.selectDataIndex = index;
		},
		// 切换图片
		onSwiperDataIndex(index) {
			this.swiperDataIndex = index;
		},
		collectData(dataList) {
			let lineCount = 0;
			let brandCount = 0;
			let brandTempArr = [];
			let typeTempArr = [];
			let boxCount = dataList.length;
			let tagCount = dataList.length;
			let boxAskew = dataList.length;
			let boxLost = dataList.length;
			let tagLost = dataList.length;
			let brandLoadRate = [];
			let typeLoadRate = [];

			dataList.forEach((element) => {
				// let brand =smk[0]
				// let type=
				if (element.row > lineCount) lineCount = element.row;
				if (element.name) {
					let smk = element.name.split('_');
					brandTempArr.push(smk[0]);
					typeTempArr.push(element.name);
				}
			});
			let rateCompute = (tempArr, index, isSplit = true) => {
				let arr = [];
				tempArr.forEach((name) => {
					let count = 0;
					dataList.forEach((item) => {
						if (item.name) {
							if (isSplit) {
								let smk = item.name.split('_');
								if (name === smk[index]) {
									count++;
								}
							} else {
								if (name === item.name) {
									count++;
								}
							}
						}
					});
					arr.push({
						name,
						count,
						rateCount: Math.floor((count / dataList.length) * 10000) / 100
					});
				});
				return arr;
			};
			let tempArr = [...new Set(brandTempArr)];
			brandCount = tempArr.length;

			brandLoadRate = rateCompute(tempArr, 0);
			tempArr = [...new Set(typeTempArr)];
			typeLoadRate = rateCompute(tempArr, 1, false);
			return {
				lineCount,
				brandCount,
				boxCount,
				tagCount,
				boxAskew,
				boxLost,
				tagLost,
				brandLoadRate,
				typeLoadRate
			};
		},
		onCollectData(data) {
			this.$set(this.swiperData[data.index], 'collectData', this.collectData(data.dataList));
		},
		onChangeSwitch(status) {
			this.boxSwitch = status;
		},
		async OnFullScreen() {
			let imageExample = await this.$refs.canvasFrame.onFullScreen();

			// #ifdef H5
			this.$refs.popupComponent.open();
			this.imagePreviewExample = imageExample;
			// #endif
			// #ifdef MP-WEIXIN
			uni.previewImage({
				urls: [imageExample]
			});
			// #endif
		}
	}
});
</script>

<style lang="scss" scoped>
.index {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.table-box{

	width: calc(100% - 30px);
	border: 15px solid transparent;
}
.scroll-Y {
	flex: 1;
	overflow: scroll;
	white-space: nowrap;
}

.flex {
	height: calc(100% - 44rpx - 100rpx);
	flex-direction: column;
}
</style>
